<div class="player {{ mini ? 'mini' :   'card'}}">
	<div (click)="onArtist()" appRipple class="player-track">
		<div class="image">
			<img (swipe)="onSwipe($event)" [src]="track?.album?.picture || '/assets/app-icon-text.png'" />
		</div>

		<div class="track">
			<h1>{{ track.name }}</h1>
			<p>{{ track.artist }}</p>

		</div>
	</div>



	<div class="player-controls">
		<button data-tooltip="Shuffle" appRipple (click)="playerService.onShuffle()"
			class="button transparent {{ playerService.shuffle ? 'primary' : '' }}">
			<i class="ph-shuffle-simple"></i>

		</button>
		<button data-tooltip="Prev track" class="button transparent" appRipple [disabled]="playerService.isFirst"
			(click)="playerService.onPrev()">
			<i class="ph-skip-back"></i>
		</button>
		<button data-tooltip="Playback" class="button transparent" appRipple (click)="playerService.onPlayback()">
			<i class="ph-{{playing ? 'pause' : 'play' }}"></i>
		</button>
		<button data-tooltip="Next track" class="button transparent" appRipple [disabled]="playerService.isLast"
			(click)="playerService.onNext()">
			<i class="ph-skip-forward"></i>
		</button>
		<button data-tooltip="Repeat" appRipple (click)="playerService.onRepeat()"
			class="button transparent {{ playerService.repeat ? 'primary' : '' }}"><i class="ph-repeat"></i>

		</button>

		<button data-tooltip="Like" appRipple (click)="onLike()"
			class="button transparent {{  track.liked ? 'danger' : '' }}">
			<i class="ph-heart"></i>
		</button>




	</div>
	<div class="player-progress">
		<div class="time">
			{{ currentTime | formatSeconds }}
		</div>

		<div class="slider">
			<app-slider [seekable]="!(buffering && playing)" [options]="{vertical: false, autoSize: false}"
				[buffer]="buffer" [value]="progress" (valueChange)="onProgress($event)">
			</app-slider>


			<app-loading [absolute]="true" [loading]="buffering && playing"></app-loading>
		</div>

		<div class="time">
			{{ (track.duration || 0) | formatSeconds }}
		</div>
	</div>

</div>